<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: blue;
            /* 给绝对定位，有left和top值 */
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 当鼠标在盒子按下的时候
        // 并且鼠标window中移动的时候box元素跟着鼠标一起移动

        // 先获取元素
        var box = document.querySelector('.box')
            // 调用  鼠标按下事件
        box.onmousedown = function() {
                // console.log(1);
                // 再按下的同时 调用鼠标移动事件 在window移动
                window.onmousemove = function(e) {
                    // box要跟着光标移动
                    // 获取事件对象 兼容写法 
                    e = e || window.event
                        // 要获取光标在可视窗口的坐标 就是离水平位置x和垂直位置y的距离
                        // 要让光标在盒子的中间， 在盒子的宽度和高度减一半就好了
                    var x = e.clientX - box.offsetWidth / 2;
                    var y = e.clientY - box.offsetHeight / 2;

                    // 获取浏览器的宽高
                    var width = outerWidth;
                    var height = outerHeight;
                    // 不让盒子超出浏览器的可视窗口
                    // 要让盒子的left和top的最小值为值0
                    if (x <= 0) {
                        x = 0;
                    }
                    if (y <= 0) {
                        y = 0;
                    }
                    // 要让盒子在右边的时候也不超出
                    // 要让盒子的left值等于浏览器的宽度-盒子的宽度
                    if (x >= window.innerWidth - box.offsetWidth) {
                        x = window.innerWidth - box.offsetWidth
                    }

                    // 要让盒子的left值等于浏览器的宽度 - 盒子的宽度
                    if (y >= window.innerHeight - box.offsetHeight) {
                        y = window.innerHeight - box.offsetHeight
                    }
                    // 然后赋值给box的left值和top值
                    box.style.left = x + 'px';
                    box.style.top = y + 'px'
                }
            }
            // 现在鼠标抬起盒子也会跟着移动，所以要把移动事件清除
            // 调用 鼠标抬起事件
        window.onmouseup = function() {
            // 清楚一个事件，把鼠标事件的值设置为数字类型的空 null

            window.onmousemove = null;


        }
        console.log(outerHeight, outerWidth);
    </script>
</body>

</html>